<template>
  <div class="n" :model="form">
    <h3>身高</h3>
    <van-field
      readonly
      clickable
      style="border-bottom: 1px solid gainsboro"
      name="datetimePicker"
      :value="form.height + `  CM`"
      placeholder="请填写"
      @click="showPicker = true"
    />
    <van-popup
      v-model="showPicker"
      position="center"
      style="width: 300px; height: 150px"
    >
      <div class="sg">请输入您的身高</div>
      <div class="srk">
        <input maxlength="3" class="inp" type="text" v-model="form.height" />cm
      </div>
    </van-popup>

    <h3>体重</h3>
    <van-field
      readonly
      clickable
      style="border-bottom: 1px solid gainsboro"
      name="datetimePicker"
      :value="form.weight + `  KG`"
      placeholder="请填写"
      @click="showPicker1 = true"
    />
    <van-popup
      v-model="showPicker1"
      position="center"
      style="width: 300px; height: 150px"
    >
      <div class="sg">请输入您的体重</div>
      <div class="srk">
        <input maxlength="3" class="inp" type="text" v-model="form.weight" />kg
      </div>
    </van-popup>

    <h3>目标体重</h3>
    <van-field
      readonly
      clickable
      style="border-bottom: 1px solid gainsboro"
      name="datetimePicker"
      :value="form.targetweight + `  KG`"
      placeholder="请填写"
      @click="showPicker2 = true"
    />
    <van-popup
      v-model="showPicker2"
      position="center"
      style="width: 300px; height: 150px"
    >
      <div class="sg">请输入您的目标体重</div>
      <div class="srk">
        <input
          maxlength="3"
          class="inp"
          type="text"
          v-model="form.targetweight"
        />kg
      </div>
    </van-popup>

    <van-button type="default" class="btn" @click="next">下一步</van-button>
  </div>
</template>

<script>
import httpApi from "@/http";
import storage from "@/utils/Storage";
export default {
  data() {
    return {
      form: {
        uid: this.$route.params.id,
        height: "",
        weight: "",
        targetweight: "",
      },
      value: "",
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
    };
  },
  methods: {
    next() {
      // console.log(this.form);
      if (this.form.height && this.form.weight && this.form.targetweight) {
        httpApi.userApi.information(this.form).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            let uid = this.form.uid;
            httpApi.userApi.userCount({ uid }).then((res) => {
                // console.log(res.data.data[0]);
              storage.set(storage.KEY_USER,res.data.data[0]);
              this.$router.push(`/home/indexV/index`);
            });
          }
        });
      } else {
        Toast({
          message: "请填写完整信息",
          position: "bottom",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.n {
  margin: 50px 20px 0;

  h3 {
    margin: 50px 10px 10px;
  }
}
.sg {
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  padding: 20px 50px 15px 50px;
}
.inp {
  display: inline-block;
  width: 60px;
  margin: 30px 5px;
  border: none;
  outline: none;
  border-bottom: 1px solid #999;
  padding: 0px 20px;
  font-size: 20px;
}
.srk {
  text-align: center;
}
.btn {
  position: absolute;
  bottom: 60px;
  left: 35px;
  width: 80%;
  background-color: #9c8be9;
  color: white;
}
</style>
